@charset "utf-8";
@red: red;
// 盒模型  (名称空间)
.boxModel () {
  .borderBox {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .contentBox {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
  }
}
// 布局
.layouts () {
  // float布局
  .floatBox {
    &::after {
      content: '.';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    &>.left {
      float: left;
    }
    &>.right {
      float: right;
    }
  }
  // 固定
  .fixedTop {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .fixedLeft {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
  .fixedBottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .fixedRight {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .fixedCenter {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  // flex
  .flexBox {
    display: flex;
    display: -webkit-flex;
  }
}
